<template>
  <div>
    <div class="wrapper">
      <v-head></v-head>
      <v-sidebar></v-sidebar>
      <div class="content-box" :class="{'content-collapse':collapse}">
        <!-- <v-tags></v-tags> -->
        <nav-bar></nav-bar>
        <div class="content">
          <keep-alive :include="tagsList">
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vHead from './Header'
import vSidebar from './Sidebar'
import bus from './bus'
import vTags from './Tags'
import navBar from './Navbar'
export default {
  data () {
    return {
      collapse: false,
      tagsList: []
    }
  },
  mounted () {
    bus.$on('collapse', msg => {
      this.collapse = msg
    })
    bus.$on('tags', msg => {
      let arr = []
      msg.forEach(ele => {
        if (ele.name) {
          arr.push(ele.name)
        }
      })
      this.tagsList = arr
    })
  },
  components: {
    vHead, vSidebar, vTags, navBar
  }
}
</script>
<style scoped>
.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
}
.content-collapse {
  left: 65px;
}
.content {
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
